<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" title="完成工单" width="600px">
    <div v-if="datarow.categoryId==1" class="mb20 c-999">注意：技术员需要预设该设备的报警电流、报警电压、剩余电流、报警温度</div>
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <em v-if="datarow.categoryId==1">
        <el-form-item label="报警电流" prop="a">
          <el-input placeholder="输入预设报警电流" v-model="form.a" style="width: 460px;" />
        </el-form-item>
        <el-form-item label="报警电压" prop="u">
          <el-input placeholder="输入预设报警电压" v-model="form.u" style="width: 460px;" />
        </el-form-item>
        <el-form-item label="剩余电流" prop="list_a">
          <el-input placeholder="输入预设剩余电流" v-model="form.list_a" style="width: 460px;" />
        </el-form-item>
        <el-form-item label="报警温度" prop="t">
          <el-input placeholder="输入预设报警温度" v-model="form.t" style="width: 460px;" />
        </el-form-item>
      </em>
      <el-form-item label="关联设备">
        <div v-if="datarow.categoryId==1">
          <el-cascader
            v-model="eqmtIds"
            :options="eqmtList"
            :props="{ multiple: true }"
            clearable
            style="width: 460px;"
          ></el-cascader>
        </div>
        <div v-else>
          <el-tag
            style="margin-bottom:2px;"
            v-for="item in datarow.equipments"
            :key="item.id"
          >{{item.name}}</el-tag>
        </div>
      </el-form-item>
      <el-form-item label="备注" prop="mark">
        <el-input placeholder="输入备注" type="textarea" v-model="form.mark" style="width: 460px;" />
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          class="upload-demo"
          :action="image_url"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :before-upload="beforeUpload"
          :limit="3"
          :on-exceed="handleExceed"
          :on-success="handleSuccess"
          :file-list="fileList"
        >
          <el-button size="mini" type="primary" icon="el-icon-upload">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">最多三张图片，png，jpg 图片</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        v-if="datarow.categoryId==1"
        size="small"
        :loading="loading"
        type="primary"
        @click="doSubmit"
      >确认</el-button>
      <el-button v-else size="small" :loading="loading" type="primary" @click="doSubmit1">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadurl from "@/http/uploadconfig";
import { _eqmtListOrder, _equipmentModify, _ordersModify } from "@/http/ajax";
export default {
  name: "addnet",
  props: {
    cur_this: {
      type: Object,
      required: null
    }
  },
  data() {
    return {
      image_url: uploadurl.image_url,
      dialog: false,
      loading: false,
      form: {
        a: "",
        u: "",
        list_a: "",
        t: "",
        mark: "",
        status: "",
        flowStatus: "",
        id: "",
        order_id: "",
        images: ""
      },
      rules: {
        a: [{ required: true, message: "输入预设报警电流", trigger: "blur" }],
        u: [{ required: true, message: "输入预设报警电压", trigger: "blur" }],
        list_a: [
          { required: true, message: "输入预设报警温度", trigger: "blur" }
        ],
        t: [{ required: true, message: "输入预设报警温度", trigger: "blur" }]
      },
      fileList: [],
      datarow: {},
      eqmtList: [],
      eqmtIds: []
    };
  },

  methods: {
    domInit(d) {
      this.getList(d);
    },
    getList({ provinceId, cityId, districtId }) {
      let data = {
        provinceId: provinceId,
        cityId: cityId,
        districtId: districtId
      };
      _eqmtListOrder(
        data,
        res => {
          this.eqmtList = [];
          res.content.forEach(el => {
            this.eqmtList.push({
              value: el.id,
              label: el.name
            });
          });
        },
        err => {}
      );
    },
    orderModify() {
      let data = {
        id: this.datarow.id,
        flowStatus: 2,
        status: 1,
        images: this.form.images,
        mark: this.form.mark
      };
      _ordersModify(
        data,
        res => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.dialog = false;
          this.cur_this.getList();
        },
        err => {}
      );
    },
    doSubmit() {
      this.form.id = this.eqmtIds.join(",");
      this.form.order_id = this.datarow.id;
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.form.images) {
            this.$message.warning("请上传完成图片");
            return;
          }
          let data = {
            a: this.form.a,
            u: this.form.u,
            list_a: this.form.list_a,
            t: this.form.t,
            id: this.form.id,
            order_id: this.form.order_id
          };
          _equipmentModify(
            data,
            res => {
              this.orderModify();
            },
            err => {}
          );
        }
      });
    },
    doSubmit1() {
      if (!this.form.images) {
        this.$message.warning("请上传完成图片");
        return;
      }
      this.orderModify();
    },
    beforeUpload(file) {},
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning("最多上传一个文件");
    },
    beforeRemove(file, fileList) {
      this.is_exls = false;
      return true;
    },
    handleSuccess(response, file, fileList) {
      let a = [];
      fileList.forEach(el => {
        a.push(el.response.data[0]);
      });
      console.log(response);
      this.form.images = a.join(",");
    }
  }
};
</script>

<style lang="scss">
</style>
